<template>
  <div class="auth-page">
    <div class="auth-container">
      <div class="auth-box">
        <div class="auth-header">
          <div class="logo">Deploy by adnaan</div>
          <h2>创建账号</h2>
          <p>欢迎加入，请填写以下信息</p>
        </div>

        <el-form 
          ref="formRef"
          :model="form"
          :rules="rules"
          class="auth-form"
        >
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              placeholder="用户名"
              :prefix-icon="User"
              size="large"
            />
          </el-form-item>

          <el-form-item prop="email">
            <el-input
              v-model="form.email"
              placeholder="邮箱地址"
              :prefix-icon="Message"
              size="large"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="密码"
              :prefix-icon="Lock"
              show-password
              size="large"
            />
          </el-form-item>

          <el-form-item prop="confirmPassword">
            <el-input
              v-model="form.confirmPassword"
              type="password"
              placeholder="确认密码"
              :prefix-icon="Lock"
              show-password
              size="large"
            />
          </el-form-item>

          <div class="form-options">
            <el-checkbox v-model="agreeTerms">
              我已阅读并同意
              <a href="#" class="terms-link">服务条款</a>
              和
              <a href="#" class="terms-link">隐私政策</a>
            </el-checkbox>
          </div>

          <el-button
            type="primary"
            :loading="loading"
            class="submit-btn"
            size="large"
            @click="handleRegister"
            :disabled="!agreeTerms"
          >
            {{ loading ? '注册中...' : '注册' }}
          </el-button>

          <div class="divider">
            <span>或者</span>
          </div>

          <div class="social-login">
            <el-button class="github-btn" size="large">
              <i class="fab fa-github"></i>
              使用 GitHub 账号注册
            </el-button>
          </div>
        </el-form>

        <div class="auth-footer">
          已有账号？
          <router-link to="/login" class="login-link">立即登录</router-link>
        </div>
      </div>

      <div class="auth-features">
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-rocket"></i>
          </div>
          <div class="feature-content">
            <h3>快速部署</h3>
            <p>一键部署您的应用，支持多种框架和平台</p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-shield-alt"></i>
          </div>
          <div class="feature-content">
            <h3>安全可靠</h3>
            <p>加密传输，多重认证，保障您的应用安全</p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-chart-line"></i>
          </div>
          <div class="feature-content">
            <h3>实时监控</h3>
            <p>全方位监控您的应用状态和性能</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../store/auth'
import { ElMessage } from 'element-plus'
import { User, Message, Lock } from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()

const formRef = ref(null)
const loading = ref(false)
const agreeTerms = ref(false)

const form = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (form.value.confirmPassword !== '') {
      formRef.value.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.value.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  password: [
    { required: true, validator: validatePass, trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validatePass2, trigger: 'blur' }
  ]
}

const handleRegister = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    if (!agreeTerms.value) {
      return ElMessage.warning('请先同意服务条款和隐私政策')
    }
    
    loading.value = true
    const { username, email, password } = form.value
    await authStore.register({ username, email, password })
    ElMessage.success('注册成功')
    router.push('/')
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '注册失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--background-primary) 0%, #ffffff 100%);
  padding: var(--spacing-xl);
}

.auth-container {
  display: flex;
  align-items: center;
  gap: 6rem;
  max-width: 1200px;
  margin: 0 auto;
}

.auth-box {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-lg);
  animation: slideUp var(--transition-normal);
}

.auth-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.logo {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--spacing-md);
}

.auth-header h2 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.auth-header p {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.auth-form {
  margin-bottom: var(--spacing-xl);
}

.form-options {
  margin: var(--spacing-md) 0 var(--spacing-xl);
}

.terms-link {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.terms-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.submit-btn {
  width: 100%;
  height: 44px;
  font-size: var(--font-size-base);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.divider {
  position: relative;
  text-align: center;
  margin: var(--spacing-xl) 0;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 30px);
  height: 1px;
  background: var(--border-color);
}

.divider::before { left: 0; }
.divider::after { right: 0; }

.divider span {
  background: white;
  padding: 0 var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.social-login {
  margin-bottom: var(--spacing-xl);
}

.github-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: #24292e;
  color: white;
  border: none;
  transition: background var(--transition-fast);
}

.github-btn:hover {
  background: #1a1f23;
}

.auth-footer {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.login-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  margin-left: var(--spacing-xs);
  transition: color var(--transition-fast);
}

.login-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

:deep(.el-input__wrapper) {
  padding: 4px 11px;
  box-shadow: 0 0 0 1px var(--border-color);
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--primary-color);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px var(--primary-light), 0 0 0 1px var(--primary-color) inset;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

:deep(.el-checkbox__input.is-focus .el-checkbox__inner) {
  border-color: var(--primary-color);
}
.auth-features {
  display: none;
  flex-direction: column;
  gap: var(--spacing-xl);
  max-width: 400px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-color);
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
}

.feature-content h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-lg);
}

.feature-content p {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

@media (min-width: 1200px) {
  .auth-features {
    display: flex;
  }
}


@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1200px) {
  .auth-features {
    display: none;
  }
}
</style> 